<template>
  <div>
    <warning ref="warning"></warning>

    

    <!-- 滑动删除 -->
    <navigator
      class="item"
      url="/pages/del/main"
      open-type="navigate"
      hover-class="none">
      todel
    </navigator>

    <!-- 点击水波纹效果 插件包 -->
    <navigator
      class="item"
      url="/pages/ripple/main"
      open-type="navigate"
      hover-class="none">
      ripple
    </navigator>

    <!-- 引导步骤 -->
    <navigator
      class="item"
      url="/pages/demo/main"
      open-type="switchTab"
      hover-class="none">
      demo
    </navigator>

    <!-- form表单校验 -->
    <navigator
      class="item"
      url="/pages/form/main"
      open-type="navigate"
      hover-class="none">
      form
    </navigator>

    <!-- canvas -->
    <navigator
      class="item"
      url="/pages/canvas/main"
      open-type="navigate"
      hover-class="none">
      canvas
    </navigator>

    <!-- bmi -->
    <navigator
      class="item"
      url="/pages/bmi/main"
      open-type="navigate"
      hover-class="none">
      bmi
    </navigator>

    <!-- picker -->
    <navigator
      class="item"
      url="/pages/picker/main"
      open-type="navigate"
      hover-class="none">
      picker
    </navigator>

    <input class="item" type="text" id="input" v-model="fst" placeholder="输入字体大小1~13" />
    <button plain type="primary" @tap="tapFS">改变全局字体</button>

    <div :class="'fs'+fs">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, corrupti hic ipsum, consequuntur reiciendis doloribus consequatur culpa error earum quo a. Commodi, est adipisci debitis possimus optio expedita beatae dolores!</div>
    <div :class="'fs'+fs">观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。
      舍利子，色不异空，空不异色，色即是空，空即是色，受想行识亦复如是。
      舍利子，是诸法空相，不生不灭，不垢不净，不增不减。是故空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界乃至无意识界，无无明亦无无明尽，乃至无老死，亦无老死尽，无苦集灭道，无智亦无得。
      以无所得故，菩提萨埵，依般若波罗蜜多故，心无挂碍；无挂碍故，无有恐怖，远离颠倒梦想，究竟涅槃。
      三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。
      故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。
      故说般若波罗蜜多咒，即说咒曰：揭谛揭谛，波罗揭谛，波罗僧揭谛，菩提萨婆诃。
    </div>
    <input class="item" @blur="contactBlur" type="number" placeholder="手机号表单校验">

    <contact></contact>

    <!-- <tab-bar></tab-bar> -->

  </div>
</template>

<script>
import Warning from '@/components/Warning'
import Contact from '@/components/Contact'
import TabBar from '@/components/TabBar'
import { mapState, mapMutations } from 'vuex'

import { getFlyio } from '@/api'

export default {
  components: {
    Contact,
    TabBar
  },
  computed: {
    ...mapState([
      // 将this.fs 映射为 store.state.fs
      'fs'
    ])
  },
  onShow () {
    // this.connect()
    // 测试flyio
    this.test()
  },
  data () {
    return {
      fst: '',
    }
  },

  methods: {
    ...mapMutations([
      'fsChange'
    ]),

    contactBlur (e) {
      console.log(e)
      console.log(this.$refs.warning)
    },

    // 修改全局字体
    tapFS () {
      // this.globalData.fs = this.fs
      // console.log(this.globalData.fs)
      // console.log(this.fst)
      this.fsChange(+this.fst)
    },

    // 初始化蓝牙连接
    connect: function () {
      // 开启蓝牙
      wx.openBluetoothAdapter({
        success: res => {},
        fail: res => {},
        complete: res => {
          console.log('open', res)
          if (res.errCode === 10001) {
            wx.showToast({
              title: '当前蓝牙不可用', //提示的内容,
              icon: 'none', //图标,
              duration: 2000, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {}
            });
          }
          // 蓝牙状态的监听
          wx.onBluetoothAdapterStateChange(res => {
            console.log('change', res)
            if (res.available) {
              setTimeout(function () {
                // connect()
              }, 2000)
            }
          });
          // 开始搜索
        }
      })
    },

    // 测试flyio
    test () {
      getFlyio().then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      });
    }
  },

}
</script>

<style lang="scss" scoped>
.item {
  width: 90%;
  margin: auto;
  padding: 10rpx;
  margin: 10rpx;
  color: #fff;
  background-color: skyblue;
  text-align: center;
  border-radius: 10rpx;
}


</style>
